<template>
  <div>
    <el-card class="box-card tac" style="font-size: 18px;
    color: #909399;font-weight: 700;;">
      <span>{{isadd?'添加城市信息':'修改城市信息'}}</span>
    </el-card>
    <el-card class="box-card tac" style="margin-top:5px;">
      <el-form ref="form" :model="form">
        <el-form-item style="margin-top:40px;" v-if="!isadd">
          <span style="font-size:14px;color: #303133; line-height: 40px;margin-right:10px;">城市编号</span>
          <el-input disabled v-model="form.cityId" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item style="margin-top:40px;">
          <span style="font-size:14px;color: #303133; line-height: 40px;margin-right:10px;">城市名称</span>
          <el-input v-model="form.name" placeholder="请输入城市名称" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item style="margin-top:40px;">
          <span style="font-size:14px;color: #303133; line-height: 40px;margin-right:10px;">城市拼音</span>
          <el-input v-model="form.pinyin" placeholder="请输入城市拼音" style="width:300px"></el-input>
        </el-form-item>

        <el-form-item style="margin-top:40px;">
          <span style="font-size:14px;color: #303133; line-height: 40px;margin-right:10px;">热门城市</span>
          <el-switch v-model="form.isHot" :active-text="form.isHot?'是':'否'"></el-switch>
          <!-- <span
            style="margin-left:15px;font-size: 14px;color: #606266; "
          >{{this.form.isHot?'是':'否'}}</span>-->
        </el-form-item>

        <el-form-item class="tac">
          <el-button
            v-loading="loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            type="primary"
            @click="onSubmit"
            style="margin-left:40px;"
          >{{isadd?"添加城市":'确认修改'}}</el-button>
          <el-button type="info" style="margin-left:40px;" @click="exit">{{isadd?"清空数据":'取消修改'}}</el-button>
          <el-button type="success" style="margin-left:40px;" @click="watch">查看列表</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isadd: true,
      loading: false,
      form: {
        name: "",
        pinyin: "",
        cityId: "",
        isHot: false
      }
    };
  },
  created() {
    if (this.$route.path == "/city/edit") {
      this.isadd = false;
      this.form = this.$route.params;
    } else {
      this.isadd = true;
    }
    // }

    // if (!this.$route.params.cityId) {
    //   this.isadd = true;
    // } else {
    //   this.isadd = false;
    //   this.form = this.$route.params;
    // }

    console.log(this.$route);
  },
  methods: {
    onSubmit() {
      this.loading = true;
      if (this.form.name == false) {
        this.$message({
          showClose: true,
          message: "请输入城市名称",
          type: "warning"
        });
        setTimeout(() => {
          this.loading = false;
        }, 800);
      } else if (this.form.pinyin == false) {
        this.$message({
          showClose: true,
          message: "请输入城市拼音",
          type: "warning"
        });
        setTimeout(() => {
          this.loading = false;
        }, 800);
      } else {
        if (this.isadd) {
          let url = "/city/add";
          this.$axios
            .post(url, this.form)
            .then(res => {
              if (res.code == 666) {
                this.loading = false;
                this.$message.success("添加城市信息成功");
              }
            })
            .catch(err => {
              this.loading = false;
              this.$message.error("城市名称已存在");
            });
          setTimeout(() => {
            this.loading = false;
          }, 800);
        } else {
          this.loading = true;
          let url = "/city/edit";
          this.$axios
            .post(url, this.form)
            .then(res => {
              let msgObj = this.$message.success("修改城市信息成功");
              this.loading = false;
              setTimeout(() => {
                msgObj.close();
                this.$router.push("/city/list");
              }, 500);
            })
            .catch(err => {
              this.$message.error("城市名称已存在");
              this.loading = false;
            });
        }
      }
    },
    exit() {
      if (this.isadd) {
        (this.form.name = ""),
          (this.form.pinyin = ""),
          (this.form.isHot = false);
      } else {
        this.$router.push("/city/list");
      }
    },
    watch() {
      this.$router.push("/city/list");
    }
  }
};
</script>